<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示与定位</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .boxa {
            width: 200px;
            height: 200px;
            background-color: rgb(121, 46, 46);
            /* display: none; */
             /* display: none; 可以理解为直接将该元素在网页上删除*/
            /* display: inline; */
        }
        .s1{
            width: 100px;
            height: 100px;
            background-color: rgb(50, 155, 141);
            display:inline-block ;
        }
        .box1{
            background-color: rgb(100, 125, 194);
            visibility:hidden
            /* visibility:hidden  元素隐身，但是还是会占据文档流，大小位置都保留*/
            /* display: none; */
        }
        .box1:hover+span{
            color: red;
        }
        .box2{
            background-color: rgb(134, 128, 216);
            opacity: 0;
            /* opacity: 0; 元素隐身，但是还是会占据文档流，大小位置都保留 */
        }
        .box2:hover+span{
            color: red;
        }
    </style>
</head>

<body>

    <div class="box boxa">
        我是一个box
    </div>
    <span class="s1">我是span1</span> 
    <span class="s2">我是span2</span> 
    <div class="box box1">box1</div>
    <span>box1后面的span</span>
    <div class="box box2">box2</div>
    <span>box2后面的span</span><br>
    <span class="s2">我是span3</span> 

    <!-- display:none
    元素完全脱离文档流，相当于从html删除该元素，不再占据位置，也不会响应事件。
    visibility:hidden 
    元素没有脱离文档流，大小和位置不变，元素隐身，不会响应事件
    opacity: 0
    元素没有脱离文档流，大小和位置不变，元素隐身，会响应事件 -->
</body>

</html>